<template>
  <div class="task-history">
    <el-table v-loading="loading" :data="records" size="small" style="width: 100%" height="100%">
      <el-table-column
        v-for="col in tableColumns"
        :prop="col.prop"
        :label="col.label"
        :width="col.width"
        :key="col.prop"
      >
        <template slot-scope="scope">
          <span v-if="col.type === 'time'"> {{ scope.row[col.prop] | format }}</span>
          <span class="state" v-else-if="col.type === 'state'" :class="scope.row[col.prop]">
            {{ scope.row[col.prop] }}
          </span>
          <span v-else>{{ scope.row[col.prop] }}</span>
        </template>
      </el-table-column>

      <el-table-column label="任务ID" width="350">
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.app_proxy_url"
            :href="scope.row.app_proxy_url"
            type="primary"
            target="_blank"
            >{{ scope.row.application_id }}</el-link
          >
          <span v-else>{{ scope.row.application_id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-link
            v-if="scope.row.driver_proxy_url"
            :href="scope.row.driver_proxy_url"
            type="primary"
            target="_blank"
            >Driver 日志</el-link
          >
          <el-link type="primary" @click="downloadLog(scope.$index, scope.row)">pod 日志</el-link>
          <el-popconfirm
            v-if="scope.row.state == 'running'"
            confirm-button-text="确认"
            cancel-button-text="取消"
            title="确定停止吗？"
            @onConfirm="handleStop(scope.$index, scope.row)"
          >
            <el-button slot="reference" size="mini" type="danger" icon="el-icon-video-pause" circle></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "TaskHistory",
  data() {
    return {
      records: [],
      tableColumns: [
        {
          prop: "dag_id",
          label: "工作流ID",
          width: "130"
        },
        {
          prop: "task_id",
          label: "任务ID",
          width: "130"
        },
        {
          prop: "execution_date",
          label: "计划时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "start_date",
          label: "开始时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "end_date",
          label: "结束时间",
          // width: "180",
          type: "time"
        },
        {
          prop: "state",
          label: "状态",
          width: "120",
          type: "state"
        }
      ],
      loading: false
    };
  },
  computed: {
    ...mapState({
      currentTab: ({ data }) => {
        return data.currentTab || {};
      }
    })
  },
  watch: {
    ["currentTab.id"](newval) {
      if (newval) this.initData();
    }
  },
  mounted() {
    this.initData();
    this.$bus.$on("refresh-task-history", () => {
      this.initData();
    });
  },
  methods: {
    ...mapMutations(["setCurrentTab"]),
    initData() {
      this.loading = true;
      this.$http.task
        .getTaskHistory({ task_id: this.currentTab.id })
        .then(res => {
          this.records = res;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleStop(index, row) {
      this.$http.task
        .stopTask({
          dag_id: row.dag_id,
          task_id: row.task_id,
          execution_date: row.execution_date
        })
        .then(res => {
          this.initData();
        });
    },
    downloadLog(index, row) {
      this.$http.task
        .downloadTaskLog({
          hostname: row.hostname,
          operator: row.operator,
          start: -1000
        })
        .then(res => {
          const blob = new Blob([res], { type: "application/octet-stream" });
          let dom = document.createElement("a");
          let url = window.URL.createObjectURL(blob);
          dom.href = url;
          dom.download = decodeURI(row.hostname + ".log");
          dom.style.display = "none";
          document.body.appendChild(dom);
          dom.click();
          dom.parentNode.removeChild(dom);
          window.URL.revokeObjectURL(url);
        });
    },
    downloadDriverLog(index, row) {}
  }
};
</script>
<style lang="scss" scoped>
.task-history{
  padding: 8px;
  height: 100%;
  box-sizing: border-box;
  .state{
    display: inline-block;
    text-align: center;
    height: 25px;
    border-radius: 15%;
    color: white;
    &.failed{
      width: 50px;
      background:#CC3366;
    }
    &.success{
      width: 60px;
      background:#00CC33;
    }
    &.shutdown{
      width: 65px;
      background:#990099;
    }
    &.running{
      width: 65px;
      background:#3366FF;
    }
    &.queued{
      width: 60px;
      background:gray;
    }
    &.up_for_retry{
      width: 100px;
      background: gold;
    }
    &.up_for_reschedule{
      width: 120px;
      background: turquoise;
    }
    &.upstream_failed{
      width: 120px;
      background: orange;
    }
    &.skipped{
      width: 65px;
      background: pink;
    }
    &.removed{
      width: 65px;
      background: lightgrey;
    }
    &.scheduled{
      width: 70px;
      background: tan;
    }
    &.none{
      width: 60px;
      background: lightblue;
    }
    &.sensing{
      width: 70px;
      background: lightseagreen;
    }
  }
}
</style>